<template>
  <div>
    <van-nav-bar
    title="用户注册"
    left-text="返回"
    left-arrow
    @click-left="goBack"
    />
    <div class="register-panel">
      <van-field
        v-model="username"
        label="用户名"
        clearable
        placeholder="请输入用户名"
        required
        @click-icon="username=''"
        :error-message="usernameErrormsg"
      />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
        required
        :error-message="passwordErrormsg"
      />
      <div class="register-button">
        <van-button type="primary" @click="checkErrorAction" :loading="openLoading" size="large" >马上注册</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import url from '@/serviceAPI.config.js'
import {Toast} from 'vant'
export default {
  data () {
    return {
      username: '',
      password: '',
      openLoading: false, // 是否开启用户的Loading
      usernameErrormsg: '', // 当用户名出现错误的时候
      passwordErrormsg: '' // 当密码出现错误的时候
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    checkErrorAction () {
      this.checkError() && this.axiosRegisterUser()
    },
    axiosRegisterUser () {
      this.openLoading = true
      axios({
        url: url.register,
        method: 'post',
        data: {
          userName: this.username,
          password: this.password
        }
      })
        .then(response => {
          console.log(response)
          if (response.data.code === 200) {
            Toast.success('注册成功')
            this.$router.push('/')
          } else {
            console.log(response.data.message)
            Toast.fail('注册失败')
            this.openLoading = false
          }
          console.log(response.data.code)
        })
        .catch((error) => {
          console.log(error)
          this.openLoading = false
        })
    },
    // 验证表单信息
    checkError () {
      let isOk = true
      if (this.username.length < 5) {
        this.usernameErrormsg = '用户名不能少于5位'
        isOk = false
      } else {
        this.usernameErrormsg = ''
      }
      if (this.password.length < 6) {
        this.passwordErrormsg = '密码不能少于6位'
        isOk = false
      } else {
        this.passwordErrormsg = ''
      }
      return isOk
    }
  }
}
</script>

<style scoped>
.register-panel {
  width: 96%;
  border-radius: 5px;
  margin: 20px auto;
  padding-bottom: 80px;
}
.register-button {
  padding-top: 10px;
}
</style>
